<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>巷陌发现 - 手机号登录</title>
  <link rel="stylesheet" href="../static/layui/css/layui.css">
  <style>
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background: url('https://images.unsplash.com/photo-1557804506-669a67965ba0?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fDE2OTM4NzUyNjV8fHx8&auto=format&fit=crop&w=1470&q=80') no-repeat center center fixed;
      background-size: cover;
      display: flex;
      justify-content: center;
      align-items: center;
      min-height: 100vh;
    }

    .phone-login-container {
      width: 400px;
      background-color: rgba(255, 255, 255, 0.9);
      border-radius: 10px;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
      padding: 30px;
    }

    .phone-login-title {
      text-align: center;
      font-size: 24px;
      color: #333;
      margin-bottom: 20px;
      position: relative;
    }

    .phone-login-title::after {
      content: '';
      position: absolute;
      bottom: -10px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(90deg, #ff6b6b, #ffa502, #48dbfb);
    }

    .form-group {
      margin-bottom: 20px;
    }

    .form-group label {
      display: block;
      font-size: 14px;
      color: #555;
      margin-bottom: 8px;
    }

    .form-group .input-row {
      display: flex;
      align-items: center;
    }

    .form-group input {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
      font-size: 14px;
      transition: border-color 0.3s;
    }

    .form-group input:focus {
      border-color: #6a11cb;
      outline: none;
    }

    #phone,
    #loginBtn {
      width: 100%;
    }

    #code {
      flex: 1;
      margin-right: 10px;
    }

    .send-code-btn {
      padding: 10px 15px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .send-code-btn:disabled {
      background: #ccc;
      cursor: not-allowed;
    }

    .send-code-btn:hover:not(:disabled) {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .login-btn {
      padding: 12px;
      background: linear-gradient(90deg, #6a11cb, #2575fc);
      color: white;
      border: none;
      border-radius: 5px;
      font-size: 16px;
      cursor: pointer;
      transition: background 0.3s;
    }

    .login-btn:hover {
      background: linear-gradient(90deg, #5a0dc8, #1a69e0);
    }

    .other-options {
      text-align: center;
      margin-top: 20px;
    }

    .other-options a {
      color: #6a11cb;
      text-decoration: none;
      margin: 0 10px;
      font-size: 14px;
      transition: color 0.3s;
    }

    .other-options a:hover {
      color: #5a0dc8;
    }

    #phone {
        width: 95%;
    }
  </style>
</head>

<body>
  <div class="phone-login-container">
    <h2 class="phone-login-title">手机号登录</h2>
    <div class="form-group">
      <label>手机号：</label>
      <input type="text" id="phone" placeholder="请输入手机号">
    </div>
    <div class="form-group">
      <label>验证码：</label>
      <div class="input-row">
        <input type="text" id="code" placeholder="请输入验证码">
        <button class="send-code-btn" id="sendCodeBtn">发送验证码</button>
      </div>
    </div>
    <button class="login-btn" id="loginBtn">确认登录</button>
    <div class="other-options">
      <a href="#" id="registerLink">注册</a>
      <a href="#" id="forgetPwdLink">忘记密码</a>
      <a href="#" id="normalLoginLink">账号密码登录</a>
    </div>
  </div>

  <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/layui@2.6.8/dist/layui.js"></script>
  <script>
    layui.use(['layer'], function () {
      var layer = layui.layer;
      var countdown = 30;
      var countdownTimer = null;

      // 发送验证码按钮点击事件
      $('#sendCodeBtn').click(function () {
        var phone = $('#phone').val().trim();
        if (phone === '') {
          layer.msg('请输入手机号');
          return;
        }

        // 简单验证手机号格式（可根据需求完善）
        if (!/^1[3-9]\d{9}$/.test(phone)) {
          layer.msg('请输入正确的手机号');
          return;
        }

        // 开始倒计时
        $(this).prop('disabled', true);
        $(this).text(countdown + '秒后重新发送');
        countdownTimer = setInterval(function () {
          countdown--;
          $('#sendCodeBtn').text(countdown + '秒后重新发送');
          if (countdown <= 0) {
            clearInterval(countdownTimer);
            $('#sendCodeBtn').prop('disabled', false);
            $('#sendCodeBtn').text('发送验证码');
            countdown = 30;
          }
        }, 1000);

        // 这里可以添加发送验证码的请求逻辑，目前只是模拟
        layer.msg('验证码已发送，请注意查收', { icon: 6 });
      });

      // 登录按钮点击事件
      $('#loginBtn').click(function () {
        var phone = $('#phone').val().trim();
        var code = $('#code').val().trim();

        if (phone === '') {
          layer.msg('请输入手机号');
          return;
        }

        if (code === '') {
          layer.msg('请输入验证码');
          return;
        }

        // 这里可以添加手机号登录请求的逻辑，目前只是模拟
        layer.msg('登录中...', { icon: 16, shade: 0.3, time: 1000 }, function () {
          layer.msg('登录成功', { icon: 6 }, function () {
            // 登录成功后的操作，比如跳转到首页
            // window.location.href = 'index.html';
          });
        });
      });

      // 注册链接点击事件
      $('#registerLink').click(function () {
        layer.msg('跳转到注册页面');
        // 这里可以添加跳转到注册页面的逻辑
      });

      // 忘记密码链接点击事件
      $('#forgetPwdLink').click(function () {
        layer.msg('跳转到忘记密码页面');
        // 这里可以添加跳转到忘记密码页面的逻辑
      });

      // 账号密码登录链接点击事件
      $('#normalLoginLink').click(function () {
        layer.msg('跳转到账号密码登录页面');
        // 这里可以添加跳转到账号密码登录页面的逻辑
      });
    });
  </script>
</body>

</html>